<template>
  <div class="search-results">
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      finished-text="没有更多了"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell v-for="item in result" :key="item.art_id" :title="item.title" >
         <template #label>
            <span style="padding-right: 6px">{{item.aut_name}}</span>
            <span style="padding-right: 6px">点赞:{{item.comm_count}}</span>
            <span >{{item.pubdate}}</span>
          </template>
          <template v-slot:extra>
            <van-image width="50" height="50" :src="imge" v-for="(imge,index) in item.cover.images" :key='index'/>
          </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { results } from "@/api/user";
export default {
  data() {
    return {
      loading: false, //间断数据加载状态
      finished: false, //完成数据全部加载判断
      error: false,
      page: 1,
      result: [],
    };
  },
  props: {
    searchtext: {
      type: String,
      require: true,
    },
  },
 
  methods: {
    // 上滑获取搜索结果
    async onLoad() {
      try {
        const { data: res } = await results(this.searchtext, this.page, 20);
        this.result.push(...res.data.results);
        // console.log(res);
        this.loading = false;
       
        if (res.data.results.length < 20) {
          this.finished = true;
        }else{
           this.page++
        }
      } catch (err) {
        this.$toast("搜索出错，稍后再试");
      }
    },
  },
};
</script>

<style>
</style>